<script setup name="Stock">
  import { onMounted, computed, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import * as echarts from 'echarts';
  import axios from '@/utils/axios';

  const echartsRef = ref();

  const dateList = ref([])
  const klineList = ref([])
  const turnoverList = ref([])
  const ma5List = ref([])
  const ma10List = ref([])
  const ma20List = ref([])
  const ma30List = ref([])
  const ma60List = ref([])
  const ma120List = ref([])
  const stockName = ref('')

  const route = useRoute();

  // 从url路径中获取股票代码
  const stockCode = computed({
    get(){
      return route.params.code;
    }
  })

  onMounted(() => {

    const chart = echarts.init(echartsRef.value);

    axios.get('/stock/klines', { params: { code: stockCode.value } }).then(res => {
      dateList.value = res.date;
      stockName.value = res.name;
      klineList.value = res.kline;
      turnoverList.value = res.turnover;
      ma5List.value = res.ma5;
      ma10List.value = res.ma10;
      ma20List.value = res.ma20;
      ma30List.value = res.ma30;
      ma60List.value = res.ma60;
      ma120List.value = res.ma120;

      const option = {
        title: {
          text: stockName.value + " (" + stockCode.value + ")",
          left: 'center'
        },
        tooltip: { // 提示
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          position: function (pos, params, el, elRect, size) { // 固定提示框位置
            var obj = { top: 10 };
            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
            return obj;
          },
        },
        dataZoom: [ // 滑动缩放
          {
            type: 'slider',
            xAxisIndex: [0, 1],
            realtime: false,
            start: 98,
            end: 100,
            top: 320
          },
          {
            type: 'inside',
            xAxisIndex: [0, 1],
            start: 98,
            end: 100,
            top: 320
          }
        ],
        xAxis: [ // x轴 因为有两个图表 所以需要定义两次x轴
          {
            type: 'category',
            data: dateList.value
          },
          {
            type: 'category',
            gridIndex: 1, // 指定使用grid参数中的第1个grid
            data: dateList.value
          },
        ],
        yAxis: [ // y轴 因为有两个图表 所以需要定义两次y轴
          {
            scale: true,
            splitArea: { show: true }
          },
          {
            scale: true,
            gridIndex: 1, // 指定使用grid参数中的第1个grid
            splitArea: { show: true },
            axisLabel: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false }
          },
        ],
        grid: [ // 图标位置调教
          {
            left: 40,
            right: 20,
            top: 60,
            height: 140
          },
          {
            left: 40,
            right: 20,
            height: 60,
            top: 230
          }
        ],
        legend: { // 图例组件
          top: 30,
          data: ['成交额', '日K', 'MA5', 'MA10', 'MA20', 'MA30', 'MA60', 'MA120']
        },
        series: [
          {
            name: '成交额',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: turnoverList.value
          },
          {
            name: '日K',
            type: 'candlestick',
            data: klineList.value
          },
          {
            name: 'MA5',
            type: 'line',
            data: ma5List.value,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1
            }
          },
          {
            name: 'MA10',
            type: 'line',
            data: ma10List.value,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1
            }
          },
          {
            name: 'MA20',
            type: 'line',
            data: ma20List.value,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1
            }
          },
          {
            name: 'MA30',
            type: 'line',
            data: ma30List.value,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1
            }
          },
          {
            name: 'MA60',
            type: 'line',
            data: ma60List.value,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1
            }
          },
          {
            name: 'MA120',
            type: 'line',
            data: ma120List.value,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              width: 1
            }
          }
        ]
      };

      chart.setOption(option);

      // 窗口大小改变时，重新渲染图表
      window.addEventListener('resize', () => {
        chart.resize();
      });
    })

  });

  const syncStatus = ref('');

  const klineSync = () => {
    syncStatus.value = 'syncing';
    axios.get('/stock/kline/sync', {params: {code: stockCode.value}})
        .then(() => {
          syncStatus.value = 'success';
          setTimeout(() => {
            location.reload(); // 页面刷新
          }, 3000);
        })
        .catch(() => syncStatus.value = 'fail');
  }
</script>

<template>
  <div ref="echartsRef" style="width: 100%; height: 400px;"></div>
  <button @click="klineSync">同步至最新</button>
  <div v-if="syncStatus === 'syncing'">同步中</div>
  <div v-if="syncStatus === 'success'">同步成功</div>
  <div v-if="syncStatus === 'fail'">同步失败</div>
</template>

<style scoped>

</style>